<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HarmonyOS 按钮组件示例</title>
  <link rel="stylesheet" href="../dist/harmony-style.css">
  <link rel="stylesheet" href="common-styles.css">
  <style>
    .button-demo {
      margin-bottom: calc(24 * var(--unit));
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="title title-large">按钮组件示例</h1>
    
    <!-- 按钮类型 -->
    <div class="example-section">
      <h2 class="example-section-title">按钮类型</h2>
      
      <div class="button-demo">
        <h3 class="title title-sub-medium mb-medium">主要按钮</h3>
        <div class="button-group">
          <button class="button button-primary">主要按钮</button>
          <button class="button button-primary" disabled>禁用状态</button>
        </div>
      </div>
      
      <div class="button-demo">
        <h3 class="title title-sub-medium mb-medium">次要按钮</h3>
        <div class="button-group">
          <button class="button button-secondary">次要按钮</button>
          <button class="button button-secondary" disabled>禁用状态</button>
        </div>
      </div>
      
      <div class="button-demo">
        <h3 class="title title-sub-medium mb-medium">文本按钮</h3>
        <div class="button-group">
          <button class="button button-text">文本按钮</button>
          <button class="button button-text" disabled>禁用状态</button>
        </div>
      </div>
      
      <div class="button-demo">
        <h3 class="title title-sub-medium mb-medium">轮廓按钮</h3>
        <div class="button-group">
          <button class="button button-outline">轮廓按钮</button>
          <button class="button button-outline" disabled>禁用状态</button>
        </div>
      </div>
    </div>
    
    <!-- 按钮尺寸 -->
    <div class="example-section">
      <h2 class="example-section-title">按钮尺寸</h2>
      <div class="button-group">
        <button class="button button-primary button-large">大按钮</button>
        <button class="button button-primary button-medium">中等按钮</button>
        <button class="button button-primary button-small">小按钮</button>
      </div>
    </div>
    
    <!-- 状态按钮 -->
    <div class="example-section">
      <h2 class="example-section-title">状态按钮</h2>
      <div class="button-group">
        <button class="button button-success">成功按钮</button>
        <button class="button button-warning">警告按钮</button>
        <button class="button button-danger">危险按钮</button>
      </div>
    </div>
    
    <!-- 按钮形状 -->
    <div class="example-section">
      <h2 class="example-section-title">按钮形状</h2>
      <div class="button-group">
        <button class="button button-primary">默认</button>
        <button class="button button-primary button-square">方形</button>
        <button class="button button-primary button-circle" aria-label="圆形按钮">
          <svg class="button-icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
          </svg>
        </button>
      </div>
    </div>
    
    <!-- 块级按钮 -->
    <div class="example-section">
      <h2 class="example-section-title">块级按钮</h2>
      <button class="button button-primary button-block">块级按钮</button>
    </div>
    
    <!-- 按钮组 -->
    <div class="example-section">
      <h2 class="example-section-title">按钮组</h2>
      <div class="button-group">
        <button class="button button-secondary">取消</button>
        <button class="button button-primary">确定</button>
      </div>
    </div>
    
    <!-- 带图标的按钮 -->
    <div class="example-section">
      <h2 class="example-section-title">带图标的按钮</h2>
      <div class="button-group">
        <button class="button button-primary">
          <svg class="button-icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
          </svg>
          添加
        </button>
        <button class="button button-secondary">
          编辑
          <svg class="button-icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
          </svg>
        </button>
        <button class="button button-circle button-primary" aria-label="确认">
          <svg class="button-icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
          </svg>
        </button>
      </div>
    </div>
    
    <!-- 加载状态 -->
    <div class="example-section">
      <h2 class="example-section-title">加载状态</h2>
      <div class="button-group">
        <button class="button button-primary loading" aria-label="加载中">
          <svg class="button-icon" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z"/>
          </svg>
          加载中...
        </button>
      </div>
    </div>
  </div>
</body>
</html>

